<script setup>
import { ref } from 'vue'
import { RefreshRight, Open, Edit, Delete } from '@element-plus/icons-vue'
import { size } from 'lodash';

// // 表格数据容器，接收后端发来的数据
// const tableData = ref([])

//临时测试数据
const tableData = [
  {
    "id": 1,
    "name": '工位1',
    "type": '工作工位',
    "stationState": '√',
    "description": null
  }
]

//
const input = ref('')
</script>
<template>
  <el-row style="background-color: white;margin: 40px 10px 0px;border:mintcream;">
    <el-col :span="24">
      <!-- 表单功能栏 -->
      <el-row class="row1">
        <!-- 表格名称 -->
        <el-col :span="3" class="col1"><span>工位列表</span></el-col>
        <!-- 添加新设备按钮 -->
        <el-col :span="3" :offset="18">
          <el-button class="addPerson-btn" size="small" type="success" @click="handleExcelExport('用户列表.xlsx')">
            添加新工位
          </el-button>
        </el-col>
      </el-row>
      <el-row class="row2">
        <el-col :span="3">
          <el-button :icon="RefreshRight" size="middle" style="margin:0px 0px 0px 20px">
            刷新
          </el-button>
        </el-col>
        <el-col :span="21" class="col2">
          <el-row>
            <el-col :span="22">
              <el-input style="margin:0px 0px 0px -6px ;" v-model="input" class="input" placeholder="请输入工位名称..."
                clearable />
            </el-col>
            <el-col :span="2">
              <el-button type="success" style="margin:0px 0px 0px -6px ;">搜索</el-button>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
      <!-- 表单主体 -->
      <el-row class="row3" style="width: 96%;margin: 0px auto;">
        <el-col :span="24">
          <!-- data、click需要更改 -->
          <el-table :data="tableData" stripe border style="width:100%">
            <el-table-column label="序号" align="center" prop="id" width="100px" />
            <el-table-column label="名称" align="center" prop="name" width="100px" />
            <el-table-column label="类型" align="center" prop="type" width="130px" />
            <el-table-column label="工位状态" align="center" prop="stationState" width="100px" />
            <el-table-column label="位置描述" align="center" prop="description" width="200px" />
            <el-table-column label="编辑" align="center">
              <template #default="scope">
                <el-button @click="" :icon="Open" size="small">停用该工位</el-button>
                <el-button type="primary" @click="" :icon="Edit" size="small">编辑</el-button>
                <el-button type="danger" @click="" :icon="Delete" size="small">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
    </el-col>
  </el-row>
</template>
<style scoped>
.row1 {
  border-bottom: 1px solid #f7f7f7;
  padding-top: 15px;
  height: 51px;
}

.row2 {
  padding-top: 40px;
}

.row2 .col2 .input {
  border-radius: 0px;
}

.row3 {
  padding-top: 10px;
}

.rwo1 .col1 span {
  font-size: medium;
  font-weight: 900;
  padding-left: 5px;
}

.excel-btn {
  margin-left: 60px;
}

.addPerson-btn {
  margin: 0px 0px 0px 25px;
}
</style>